<template>
    <div>
        <van-row>
          <van-col span="6">
                  <van-nav-bar
                  left-text="返回"
                  left-arrow
                  @click-left="exit"
                  />
            
                <van-popup v-model="show" position="left" :style="{ width: '80%' ,height:'100%'}">
            
                </van-popup>
          </van-col>
          <van-col span="12">
              <form action="/">
              <van-search
                v-model="value"
                show-action
                shape="round"
                placeholder="请输入搜索关键词"
                @search="onSearch"
                @cancel="onCancel"
              />
            </form>
          </van-col>
          <van-col span="6">
            <van-cell title="..." @click="showShare = true" />
            <van-share-sheet
            v-model="showShare"
            title="立即分享给好友"
            :options="options"
            @select="onSelect"
            />
          </van-col>
        </van-row>
    </div>
  </template>
  
  <script>
  import { formToJSON } from 'axios';
import { Toast } from 'vant';
  import { Collapse, CollapseItem } from 'vant';
//   import LeftSide from './LeftSide.vue';
  export default {
      name:"HeaderStyle",
    //   components:{
    //     LeftSide
    //   },
      data(){
        return {
          value:'',
          show:false,
          activeNames: ['1'],
          showShare: false,
          options: [
            { name: '微信', icon: 'wechat' },
            { name: '微博', icon: 'weibo' },
            { name: '复制链接', icon: 'link' },
            { name: '分享海报', icon: 'poster' },
            { name: '二维码', icon: 'qrcode' },
          ],
        };
      },
       methods: {
        exit(){
          this.$router.go(-1)
      },
       //搜索
      onSearch(val) {
        Toast(val);
      },
      onCancel() {
        Toast('取消');
      },
      //弹出层
      showPopup() {
        this.show = true;
      },
      //分享
      onSelect(option) {
        Toast(option.name);
        this.showShare = false;
        },
    },
  }
  </script>
  
  <style>
     .custom-title {
      margin-right: 4px;
      vertical-align: middle;
    }
  
    .search-icon {
      font-size: 16px;
      line-height: inherit;
    }
  </style>